.color-picker
  position: fixed
  bottom: 12px
  right: 12px
  width: 240px
  z-index 10
  border: var(--color-picker-border) solid 3px
  user-select: none
  @media mq-mobile
    display: none
  @media mq-tablet
    display: none
  p
    font-size: 16px
    font-weight: medium
    color: var(--neut-L75)
    transition: color trans-style
  input
    margin-bottom: 12px
  #preset-list
    display: flex
    gap: 6px
    margin-bottom: 12px
    .preset-btn
      width: 24px
      height: 24px
      border-radius: 4px
      cursor: pointer
  #banner-toggle-bar
    display: flex
  .hue-text
    @supports not (color: oklch(0 0 0))
      display: none
  .oklch-tip
    font-size: 14px
    @supports (color: oklch(0 0 0))
      display: none

input[type="range"] {
  -webkit-appearance: none;
  height: 6px;
  transition: background trans-style
  background: var(--color-picker-range)
  border-radius: 3px;
}

/* Input Thumb */
::-webkit-slider-thumb
  -webkit-appearance: none;
  height: 20px;
  width: 6px;
  border-radius: 3px;
  background: var(--color-picker-thumb);
  box-shadow: none;
  transition: background trans-style;

::-moz-range-thumb
  -webkit-appearance: none;
  height: 20px;
  width: 6px;
  border-radius: 3px;
  background: var(--color-picker-thumb);
  box-shadow: none;
  transition: background trans-style;

&::-ms-thumb
  -webkit-appearance: none;
  height: 20px;
  width: 6px;
  border-radius: 3px;
  background: var(--color-picker-thumb);
  box-shadow: none;
  transition: background trans-style;
